<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 公共class */
        .content{
            width: 1190px;
            height: 800px;
            margin: 0 auto;
            background-color: orange;
        }

        /* 布局样式 */
        /* 2、直接该盒子margin-right: -10px; */
        /* 原理是这样的，在1190宽的盒子里面放了一个块级元素，默认宽度是1190
           这里就是利用了width:auto，设置了margin-right为-10，那么宽度自动1200
           父级盒子的宽度 = 子盒子 + margin-left + margin-right 
                1190     =   1200  +     0     +     -10  
           内容一定在中间，只是给box盒子往右多出了10px空白而已 */
        .box{
            margin-right: -10px;
            background-color: red;
        }

        .item{
            width: 230px;
            height: 322px;
            background-color: plum;

            /* 浮动 */
            float: left;
            margin-right: 10px;
        }
        /* 多出10px触发自动换行的解决方案 */
        /* 第一种：每行最后一个不设置margin-right 这种兼容性稍弱点 */
        .item:nth-child(5n){
            /* margin-right: 0; */
        }
        /* 第二种：麻烦一点，但是兼容性好 */
        /* .item.last-item{
            margin-right: 0;
        } */
    </style>
</head>
<body>
    <div class="content">
        <!-- 第三种：优雅解决多出来的margin-right:10px; -->
        <!-- 1、先外层包裹一个盒子 -->
        <div class="box">
            <!-- .item.item${$}*5 -->
           <div class="item item1">1</div>
           <div class="item item2">2</div>
           <div class="item item3">3</div>
           <div class="item item4">4</div>
           <div class="item item5">5</div>
        </div>
        
    </div>
</body>
</html>